<template>
    <div class="com-container">
        <!-- 饼图 -->
        <div class="title" v-if="data.type != 'transfinite-monitor'">
            <!-- <i class="circle-icon"></i> -->
            <span>{{ data.title }}</span>
            <div v-if="['transfinite-monitor'].includes(data.type) && data.name == 'PE'" class="fund-item">
                <el-select v-model="data.fundType" size="mini">
                    <el-option v-for="(value, key) in fundTypePojo" :key="key" :value="key" :label="value" @click.native="handleSelectFundType(key)">
                    </el-option>
                </el-select>
            </div>
            <div v-if="['transfinite-monitor'].includes(data.type)" class="user-item">
                <span style="width:80px"> 主办人:</span>
                <el-select v-model="data.sponsor" clearable filterable size="mini" @clear="handleSelect">
                    <el-option
                        v-for="item in data.options"
                        :key="item.leaderCode"
                        :label="item.leaderCode + ' ' + item.leaderName"
                        :value="item.leaderCode"
                        @click.native="handleSelect(item)"
                    ></el-option>
                </el-select>
            </div>
        </div>
        <div class="title-search" v-if="['1', '2'].includes(data.type)">
            <span> {{ data.type == '1' ? '按合同上传日期待办查询' : '按合同生效日期待办查询' }}</span>
        </div>
        <div
            ref="chartDom"
            class="com-chart"
            :style="{
                height: ['1', '2'].includes(data.type) ? 'calc(100% - 60px)' : 'calc(100% - 31px)',
                'margin-top': data.type == 'transfinite-monitor' ? '31px' : '0',
            }"
        ></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import DictionConstUtil from '@/utils/diction-const-util';

@Component({
    name: 'TaskBarChartPanorama',
    components: {},
})
export default class TaskBarChartPanorama extends Vue {
    @Prop() data;
    chartInstance: any = null;

    fundTypePojo = {
        A: '集合',
        B: '单一',
    };

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    // 柱状图背景色
    get barColor() {
        const value = this.data.type;
        let color = '';
        switch (value) {
            case 'already-statistics':
                color = '#b3e4fb';
                break;
            case 'transfinite-track':
                color = '#f59e2c';
                break;
            default:
                color = '#ee8f9b';
                break;
        }
        return color;
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: this.data.color,
            grid: {
                top: '10%',
                bottom: '35px',
                right: '8%',
                left: '4%',
            },
            xAxis: {
                type: 'category',
                data: this.data.xData,
                triggerEvent: true,
                // 设置文本过长超出隐藏...表示
                axisLabel: {
                    fontSize: 10,
                    color: '#666',
                    interval: 0,
                    formatter: params => {
                        if (this.data.type == 'transfinite-track') {
                            return params;
                        }
                        let val = '';
                        if (params.length > 4) {
                            val = params.substr(0, 4) + '\n' + params.substr(4);
                            return val;
                        } else {
                            return params;
                        }
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: '#efefef',
                    },
                },
            },
            yAxis: {
                type: 'value',
                show: false,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: '#9999b3',
                    },
                },
                splitLine: {
                    show: false,
                },
            },
            series: [
                {
                    type: 'bar',
                    data: this.data.data,
                    label: {
                        show: true,
                        position: 'top',
                        color: '#333',
                        // 颜色和位置、下划线是否需要调整 TODO
                        formatter: $event => {
                            return $event.value;
                        },
                    },
                    barMinHeight: 10,
                    barWidth: 45, // 柱图宽度
                    barMaxWidth: 45,
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        // this.extension(this.chartInstance);
        // 点击事件
        this.chartInstance.on('click', param => {
            console.log(param, 'param');

            const dataIndex = param.dataIndex + 1;
            if (['transfinite-monitor', 'transfinite-track'].includes(this.data.type)) {
                console.log(this.data, '-1234567890-');
                const params = {
                    fundType: this.data.fundType,
                    name: param.name,
                };
                this.$emit('click-bar', params);
            } else if (this.data.type == 'already-statistics') {
                // 已办任务统计
                const params = {
                    taskType: String(dataIndex),
                    status: '2',
                };
                this.$emit('click-bar', { params });
            } else {
                // 待办任务统计 值为1或者2
                const name = this.data.title;
                const arr = DictionConstUtil.PojoToList({ '1': '产品台账维护', '2': '指标底稿维护', '3': '交易系统维护', '4': '事后系统维护' });
                const key = arr.find(item => item.dictKeyName == name)?.dictKey;
                const params = {
                    taskType: String(key),
                };
                this.$emit('click-bar', { params });
            }
        });
    }

    updateChart(e) {
        // console.log(e, 'e');
        const dataOption = {
            series: [
                {
                    data: e.data,
                    // data: (() => {
                    //     // 按合同生效日期待办查询
                    //     let data = JSON.parse(JSON.stringify(e.data));
                    //     // if (e.type == '2') {
                    //     //     const value = data[0];
                    //     //     data[0] = {
                    //     //         value: value,
                    //     //         itemStyle: {
                    //     //             color: '#d9001b',
                    //     //         },
                    //     //     };
                    //     // } else if (e.type == 'transfinite-monitor') {
                    //     //     const value = data[0];
                    //     //     data[0] = {
                    //     //         value: value,
                    //     //         itemStyle: {
                    //     //             color: '#e75e6f',
                    //     //         },
                    //     //     };
                    //     //     const lastIndex = data.length - 1;
                    //     //     data[lastIndex] = {
                    //     //         value: data[lastIndex],
                    //     //         itemStyle: {
                    //     //             color: '#83c025',
                    //     //         },
                    //     //     };
                    //     // }
                    //     return data.map((ele, index) => {
                    //         if (ele.value > 0) {
                    //             return ele;
                    //         } else {
                    //             return ele > 0 ? ele : null;
                    //         }
                    //     });
                    // })(),
                },
            ],
            xAxis: { data: e.xData },
        };
        this.chartInstance.setOption(dataOption);
        this.extension(this.chartInstance);
    }

    // 鼠标悬浮显示全部内容
    extension(chart) {
        // 注意这里，是以X轴显示内容过长为例，如果是x轴的话，需要把params.componentType == 'xAxis'改为yAxis
        // 判断是否创建过div框,如果创建过就不再创建了
        // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
        let elementDiv: any = document.getElementById('extension');
        // elementDiv.disabled = false;
        if (!elementDiv) {
            let div: any = document.createElement('div');

            div.setAttribute('id', 'extension');
            div.style.display = 'block';
            document.querySelector('html').appendChild(div);
        }
        // else {
        //     elementDiv.disabled = true;
        // }

        chart.on('mouseover', function(params) {
            // console.log(params, 'params');

            if (params.componentType == 'xAxis') {
                let elementDiv: any = document.querySelector('#extension') as HTMLElement;
                if (params.value && params.value.length <= 5) {
                    return;
                }
                // elementDiv.disabled = true;
                // 设置悬浮文本的位置以及样式
                let elementStyle =
                    'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px';
                elementDiv.style.cssText = elementStyle;
                elementDiv.innerHTML = params.value;
                document.querySelector('html').onmousemove = function(event) {
                    let elementDiv = document.querySelector('#extension') as HTMLElement;
                    let xx = event.pageX - 10;
                    let yy = event.pageY + 15;
                    elementDiv.style.top = yy + 'px';
                    elementDiv.style.left = xx + 'px';
                };
            }
        });
        chart.on('mouseout', function(params) {
            if (params.componentType == 'xAxis') {
                let elementDiv = document.querySelector('#extension') as HTMLElement;
                elementDiv.style.cssText = 'display:none';
            }
        });
    }

    /**
     * 主办人下拉变化
     */
    handleSelect(item?: any) {
        this.$emit('user-change', { data: this.data, item });
    }

    /**
     * 私募产品类型改变
     */
    handleSelectFundType(key) {
        this.$emit('fund-change', key);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    /* height: calc(100% - 40px); */
    overflow: hidden;
}
.title-search {
    line-height: 30px;
    height: 30px;
    margin-left: 20px;
}
.fund-item {
    width: 100px;
    display: inline-block;
    margin-left: 10px;
}
.user-item {
    display: flex;
    width: 220px;
    float: right;
    margin-right: 4px;
}
</style>
